<template>
  <div>
    <!-- 每一篇新闻 -->
    <div @click="$router.push(`/newsDetails?nid=${v.nid}`)" class="news" v-for="(v, i) in news" :key="i">
      <div class="col">
        <!-- 新闻图片 -->
        <img :src="`/${v.img}`" v-lazy="`/${v.img}`" />
      </div>
      <!-- 新闻标题和日期 -->
      <div class="col">
        <div>{{ v.title }}</div>
        <div>{{ Vue.moment(v.news_time).format("YYYY年MM月DD日") }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: [],
      Vue: this,
    };
  },
  methods: {
    loadRecNews() {
      const url = "api/news/list?pno=1&fid=1";
      this.axios.get(url).then((res) => {
        this.news = res.data.data;
      });
    },
  },
  mounted() {
    this.loadRecNews();
  },
};
</script>

<style lang="scss" scoped>
.news {
  padding: 10px;
  display: flex;
  border-bottom: 1px solid #eeeeee;
  box-sizing: border-box;
  .col {
    img {
      width: 138px;
    }
    // 右侧部分的样式
    &:nth-child(2) {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      > div {
        // 新闻标题
        font-size: 0.9em;
        &:nth-child(1) {
          color: #454c58;
        }
        // 日期
        &:nth-child(2) {
          color: #afb1c6;
        }
      }
    }
    padding-right: 10px;
  }
}
</style>